import style from './showMessage.module.less';
import {default as getComponentRootDom} from './getComponentRootDom.js';
import icon from '@/components/Icon';

export default function(options){
    const text=options.text;
    const type=options.type||'info';
    const container=options.container||document.body;
    const duration=options.duration||2000;
    const div=document.createElement('div');
    if(options.container){
        if(getComputedStyle(container).position==='static'){//改变定位
            container.style.position="relative";
         }
    }
    const doms=getComponentRootDom(icon,{classty:type});//获取组件渲染的dom元素
    div.innerHTML=`<span class="${style.icon}">${doms.outerHTML}</span>
    <div>${text}</div>`;
    div.className=`${style.message} ${style['message-'+type]}`;//添加类样式
    container.appendChild(div);
    div.clientHeight;//强行渲染
    div.style.transform=`translate(-50%,-50%) `;
    div.style.opacity="1";
    
        setTimeout(()=>{
            
            div.style.transform=`translate(-50%,-50%) translateY(-25px)`;
            div.style.opacity="0";
            div.addEventListener('transitionend',function(){
            div.remove();
            options.callback&&options.callback();
        },{once:true});//只运行一次
        },duration);

}